<template>
	<view class="register-container">
		<view class="inputbox">
			<view class="text">用户名</view>
			<input type="text" placeholder="用户名" v-model="userInfo.username" class="username" />
		</view>
		<view class="inputbox">
			<view class="text">密码</view>
			<input type="text" placeholder="密码" v-model="userInfo.password" class="password" />
		</view>
		<view class="inputbox">
			<view class="text">密码</view>
			<input type="text" placeholder="确认密码" v-model="userInfo.password2" class="password" />
		</view>
		<view class="register" @click="register">注册</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { reqRegister } from '../../api/login.api.js'
	
	const userInfo = ref({
		username: '',
		password: '',
		password2: ''
	})
	
	const register = async () => {
		let data = {
			username: userInfo.value.username,
			password: userInfo.value.password
		}
		let result = await reqRegister(data)
		if (result.status === 1) {
			uni.showToast({
				title: result.message,
				icon: 'error'
			})
			return
		}
		userInfo.value = {
			username: '',
			password: '',
			password2: ''
		}
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	.register-container {
		padding-top: px2rpx(20);

		// navbar
		.header {
			width: px2rpx(375);
			height: px2rpx(50);
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;

			image {
				width: px2rpx(16);
				height: px2rpx(16);
				margin: 0 px2rpx(20);
			}

			.title {
				font-size: px2rpx(14);
				margin-left: px2rpx(120);
			}
		}

		.inputbox {
			width: px2rpx(375);
			height: px2rpx(44);
			display: flex;
			align-items: center;
			margin: 0 px2rpx(20);
			font-size: px2rpx(14);
			color: #646566;
			border-bottom: 1px solid #ebedf0;

			.username {
				margin-left: px2rpx(40);
				// color: #f9f9f9;
				font-weight: 300;
				font-size: px2rpx(14);
			}

			.password {
				margin-left: px2rpx(55);
				// color: #f9f9f9;
				font-weight: 300;
				font-size: px2rpx(14);
			}
		}

		.register {
			width: px2rpx(345);
			height: px2rpx(44);
			background-color: #1989fa;
			border-radius: px2rpx(25);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin: px2rpx(20);
		}
	}
</style>